<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
			"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Pure CSS Menus</title>
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]><script src="../ie7-standard-p.js" type="text/javascript"></script><![endif]-->
<style type="text/css">
<!--
/* IE7: force "layout" for menu items */
ul, li, li a {box-sizing: content-box; vertical-align: bottom;}

body {background: white; color: black; margin: 0; padding: 0;}

ul {padding: 0; margin: 0; border-bottom: 1px solid silver;
  font: 1em sans-serif;}
ul li {list-style-type: none;
  border: 1px solid silver; border-width: 1px 1px 0 3px;
  position: relative; margin: 0; padding: 0;}
ul ul {display: none;}
ul li:hover > ul {display: block; position: absolute; top: -1px; left: 100%;}
li a {display: block; padding: 5px 7px; text-decoration: none;
  background: #FFF;}
ul#topmenu li a:hover {background: yellow;}
li.sub > a {font-weight: bold; background: #FFE;}

h1 {margin: 0; padding: 1em 0.25em 0; font: bold 2.5em Arial, sans-serif; line-height: 0.8em; border-bottom: 1px solid silver; text-align: right; color: #557; letter-spacing: 2px;}

div#main {margin: 0 8em 0 1em; padding: 0; border-right: 1px solid silver;}
div#main p {margin: 1em 3em 1em 0.5em;}
ul#topmenu {width: 6em;}
ul#topmenu > li:hover > ul {width: 10em; top: 1.5em; left: -3px;}

ul ul {width: 10em;}

#rtnv {position: absolute; top: 6em; right: 0; width: 8em; margin: 0; padding: 0; font-family: Arial, sans-serif;}
#rtnv > ul {width: 9em; margin-left: -1px; font-size: 85%;}
#rtnv ul {border: 1px solid silver; border-width: 0 0 0 1px;}
#rtnv ul li {border-width: 1px 0; border-color: white; padding: 0 0 0 5px; line-height: 1.25em;}
#rtnv ul ul {border-width: 0 1px 1px 1px; border-color: gray silver gray gray;}
#rtnv ul ul li {border-color: #FEFEFC;}
#rtnv li > a {background-color: transparent; padding: 3px;}
#rtnv li:hover {background-color: #EED;}
#rtnv li.sub:hover {margin-left: -10.2em; border: 1px solid gray; background: #DDB;}
#rtnv li.sub:hover > a {color: #330;}
#rtnv li.sub:hover > ul {top: 1.75em; left: -1px; background: #FEFEFC;}

h4 {margin: 0 0.5em 0 0; padding: 0 0.25em; font-size: 90%; border-bottom: 1px solid silver;}

-->
</style>
</head>
<body>

<div id="main">
<script type="text/javascript" src="ie7-demo.js"></script>
<h1>pure CSS menus</h1>

<ul id="topmenu">
  <li class="sub"><a href="http://www.meyerweb.com/eric/css/edge/">css/edge</a>

    <ul>
    <li class="sub"><a href="http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html" title="fixed background images make for nifty effects [01 Oct 2001]">complexspiral</a>
      <ul>
      <li><a href="http://www.meyerweb.com/eric/css/edge/complexspiral/demo2.html" title="a spiral of extended reach [23 Feb 2002]">...devolved</a></li>
      <li><a href="http://www.meyerweb.com/eric/css/edge/complexspiral/glassy.html" title="through a glass, lightly [23 Feb 2002]">...distorted</a></li>
      </ul>
    </li>

    <li><a href="http://www.meyerweb.com/eric/css/edge/popups/demo.html" title="text appears and disappears without Javascript to drive it [01 Oct 2001]">Pure CSS popups</a></li>
    <li><a href="http://www.meyerweb.com/eric/css/edge/curvelicious/demo.html" title="text flowing along a... curve? [9 Nov 2001]">curvelicious</a></li>
    <li class="sub"><a href="http://www.meyerweb.com/eric/css/edge/slantastic/demo.html" title="elements don't have to look boxy any more [9 Nov 2001]">slantastic</a>
      <ul>
      <li><a href="http://www.meyerweb.com/eric/css/edge/slantastic/holiday.html" title="Happy Slanty Holidays! contributed by Mike Solomon [31 Dec 2001]">slanty claus?</a></li>
      </ul>
    </li>

    <li><a href="http://www.meyerweb.com/eric/css/edge/raggedfloat/demo.html" title="irregular text flows, sort of [19 Feb 2002]">ragged float</a></li>
    <li><a href="http://www.meyerweb.com/eric/css/edge/boxpunch/demo.html" title="knocking out pieces of an element gets you irregular shapes [3 Jan 2002]">boxpunch</a></li>
    </ul>
  </li>
</ul>

<p>
For some time now, I've had this idea that if one could apply <code>:hover</code> to arbitrary elements, all kinds of possibilities would open up.  Sure, we can do nifty stuff with hyperlink hovering, such as <a href="../popups/demo.html">popup text and images</a>, but to be able to apply hover styles to <em>any</em> element-- that would really be something.

</p>
<p>
So consider the box with the text "css/edge" near the top left of the page, or the list of "meyerweb" links on the right.  If you have a browser that has advanced enough CSS2 support, you can hover over some of the links and get a popout menu.  As you drill down, some of the links in those menus lead to popout submenus.  And it's all driven by CSS and some nested lists.  Absolutely no Javascript was used in the making of these menus.
</p>

<h3>No!</h3>
<p>
Yes!  That's what happens when you have a rendering engine (Gecko, in this case) that permits hover styles on arbitrary elements.  Okay, it also has to be good at positioning, but fortunately for us, Gecko's positioning code is up to the task.
</p>
<p>
Dig into the markup and the CSS.  It's all there, and it's actually a lot less complicated than you might think.  In both cases, the markup for the menus is nothing more complicated than some nested <code>ul</code> elements.  I just used <code>id</code> hooks on each list so that I could give each list a very different look-and-feel.  Try it out!  Even better, thanks to the <code>title</code> attribute, we can have "tooltip" expansions of the menu entries-- try it on any link in a "css/edge" submenu (in either menu).

</p>
<p>
Here's the foundation of this effect:
</p>
<pre>  li ul {display: none;}
  li:hover > ul {display: block;}
</pre>
<p>
Sprinkle a little positioning on top of that, so that the popout menus go where you want them, and you're in business.  Frost on some borders, colors, et cetera, and you're stylin'.
</p>

<h3>How about other browsers?</h3>
<p>
In other CSS-aware browsers, like Internet Explorer, you'll see the toplevel links, and they'll work just fine.  The popout menus won't work, that's all.  Of course, this means that the browser is downloading the contents of the complete menu, but only able to display a small part of what it downloaded.  This is in some respects unfortunate, but at least the basic menu will still function.  And the amount of markup involved is probably a lot fewer characters than a similar Javascript-driven menu intended to serve a similar purpose.
</p>
<p>

(And if you're grumbling that you don't see why anyone would deploy a menu system that only worked in one browser, then you should see how many Javascript menus I deal with that don't work in more than one or two browsers-- usually because they're doing browser sniffing as if this were still 1998.  But I digress.)
</p>
<p>
If the browser is too old to understand CSS, or doesn't support CSS because (for example) it's a text-mode browser like Lynx, then the user will get the entire menu as a set of nested lists.  No problem.
</p>
<p>
It would also be possible to construct the selectors in the CSS so that the hiding of the submenus could only be understood by advanced browsers, thus giving the complete set of nested lists to any browser that wouldn't have been able to deal with the popouts.  I didn't take this step for the demo, because it cluttered up the CSS.  Besides, it just didn't seem like as much fun that way.
</p>

<h3>Acknowledgments</h3>
<p>
It was <a href="http://www.serve.com/apg/">Porter Glendinning</a> who gave me the idea to use nested lists instead of hopelessly convoluted nested <code>div</code>s, and both Porter and <a href="http://inigo.0catch.com/">Inigio Surguy</a> devised the same basic technique independently of my efforts.  Both their demos (<a href="http://www.serve.com/apg/workshop/cssMenu.html">Porter's</a>, <a href="http://inigo.0catch.com/menu/index.html">Inigo's</a>) came to my attention just after I announced the first draft of this demo on css-discuss, and in both cases gave me some ideas to flesh this demo out a little more fully.  Many thanks and kudos are due to both!

</p>
</div>

<div id="rtnv">
<h4>meyerweb</h4>
  <ul>
  <li><a href="http://www.meyerweb.com/eric/talks/">Speaking</a></li>
  <li><a href="http://www.meyerweb.com/eric/writing.html">Writing</a></li>
  <li class="sub"><a href="http://www.meyerweb.com/eric/books/">Books</a>

    <ul>
    <li><a href="http://www.meyerweb.com/eric/books/css-tdg">CSS:TDG</a></li>
    <li><a href="http://www.meyerweb.com/eric/books/css-progref">CSS2 ProgRef</a></li>
    <li class="sub"><a href="http://www.ericmeyeroncss.com/">Eric Meyer on CSS</a>
      <ul>
      <li><a href="http://www.ericmeyeroncss.com/about-book.html">About the book</a></li>
      <li><a href="http://www.ericmeyeroncss.com/iloveme.html">Advance praise</a></li>

      <li><a href="http://www.ericmeyeroncss.com/order.html">Order a copy!</a></li>
      <li><a href="http://www.ericmeyeroncss.com/projects/">Projects</a></li>
      <li><a href="http://www.ericmeyeroncss.com/about-auth.html">About the author</a></li>
      </ul>
    </li>
    <li><a href="http://www.meyerweb.com/eric/books/css-pocket">CSS Pocket</a></li>
    </ul>

  </li>
  <li><a href="http://www.meyerweb.com/eric/css/">CSS info</a></li>
  <li class="sub"><a href="http://www.meyerweb.com/eric/css/edge/">css/edge</a>
    <ul>
    <li class="sub"><a href="http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html" title="fixed background images make for nifty effects [01 Oct 2001]">complexspiral</a>
      <ul>
      <li><a href="http://www.meyerweb.com/eric/css/edge/complexspiral/demo2.html" title="a spiral of extended reach [23 Feb 2002]">...devolved</a></li>

      <li><a href="http://www.meyerweb.com/eric/css/edge/complexspiral/glassy.html" title="through a glass, lightly [23 Feb 2002]">...distorted</a></li>
      </ul>
    </li>
    <li><a href="http://www.meyerweb.com/eric/css/edge/popups/demo.html" title="text appears and disappears without Javascript to drive it [01 Oct 2001]">pure CSS popups</a></li>
    <li><a href="http://www.meyerweb.com/eric/css/edge/menus/demo.html" title="arbitrary hover means arbitrarily nested popup menus [14 June 2002]">pure CSS menus</a></li>
    <li><a href="http://www.meyerweb.com/eric/css/edge/curvelicious/demo.html" title="text flowing along a... curve? [9 Nov 2001]">curvelicious</a></li>
    <li class="sub"><a href="http://www.meyerweb.com/eric/css/edge/slantastic/demo.html" title="elements don't have to look boxy any more [9 Nov 2001]">slantastic</a>

      <ul>
      <li><a href="http://www.meyerweb.com/eric/css/edge/slantastic/holiday.html" title="Happy Slanty Holidays! contributed by Mike Solomon [31 Dec 2001]">slanty claus?</a></li>
      </ul>
    </li>
    <li><a href="http://www.meyerweb.com/eric/css/edge/raggedfloat/demo.html" title="irregular text flows, sort of [19 Feb 2002]">ragged float</a></li>
    <li><a href="http://www.meyerweb.com/eric/css/edge/boxpunch/demo.html" title="knocking out pieces of an element gets you irregular shapes [3 Jan 2002]">boxpunch</a></li>
    </ul>

  </li>
  </ul>
</div>

</body>
</html>